<template>
  <!-- 作品 -->
  <div id="opus" class="section lb">
    <div class="container">
      <div class="section-title text-left">
        <h3 class="">作品</h3>
      </div>
      <div class="opus-menu row">
        <div class="col-md-12">
          <div class="button-group filter-button-group text-left">
            <button class="active" data-filter="*">全部</button>
            <button
              v-for="kind in opusKindList"
              :key="kind.id"
              :data-filter="kind.html"
            >
              {{ kind.title }}
            </button>
          </div>
        </div>
      </div>
      <div class="opus-list row">
        <div
          v-for="opus in opusList"
          :key="opus.id"
          class="col-md-4 col-sm-6 opus-grid"
        >
          <div class="opus-single">
            <img :src="opus.img" class="img-fluid" alt="Image" />
            <a :href="opus.href" target="_blank">
              <div class="img-overlay"></div>
            </a>
          </div>
          <p class="opus-title">{{ opus.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      opusKindList: [],
      opusList: [],
    };
  },
  methods: {
    // 笔记列表：/api/note/list
    getOpusList() {
      this.$http
        .opusList()
        .then((res) => {
          this.opusList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 笔记分类：/api/note/kind
    getOpusKindList() {
      this.$http
        .opusKindList()
        .then((res) => {
          this.opusKindList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  // 生命周期  在created方法发起ajax请求
  created() {
    // 返回一个Axios实例化对象
    this.getOpusList();
    this.getOpusKindList();
  },
};
</script>

<style lang="css" scoped>
.opus-grid,
.demo-grid {
  padding-left: 30px;
  padding-right: 30px;
}

.opus-single,
.demo-single {
  position: relative;
  overflow: hidden;
  border-radius: 1em;
  margin: 30px 0 15px;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2),
    -0.2rem -0.2rem 0.5rem var(--white);
}

#opus.body_dark .opus-single,
#demo.body_dark .demo-single {
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyDark),
    -0.2rem -0.2rem 0.5rem var(--primary-dark);
}

.opus-single:hover,
.demo-single:hover {
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  -webkit-box-shadow: none;
  box-shadow: none;
}

#opus.body_dark .opus-single:hover,
#demo.body_dark .demo-single:hover {
  box-shadow: none;
}

.opus-list .img-overlay,
.demo-list .img-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.opus-title,
.demo-title {
  padding: 0;
  margin: 0;
  color: #4a4b65;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.opus-grid:hover .opus-title,
.demo-grid:hover .demo-title {
  color: darkorange;
}

#opus.body_dark .opus-title,
#demo.body_dark .demo-title {
  color: #aaa;
}

#opus.body_dark .opus-grid:hover .opus-title,
#demo.body_dark .demo-grid:hover .demo-title {
  color: var(--a-dark-hover);
}

#demo {
  padding-top: 0;
}
</style>
